<!DOCTYPE html>
<html>
<head>
    <title>题库随机抽题</title>
    <style>
        /* 基本页面样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        h1 {
            text-align: center;
            color: #007BFF;
            margin-bottom: 20px;
        }

        /* 按钮样式 */
        button {
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            margin: 10px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        /* 问题和答案样式 */
        .question {
            margin: 10px;
            font-size: 20px;
            text-align: center;
            white-space: pre-line;
        }

        .answer {
            font-weight: bold;
            font-size: 18px;
        }

        /* 已抽取的题目序号样式 */
        .drawn-numbers {
            font-weight: bold;
            color: #007BFF;
            font-size: 16px;
        }

        /* 重置按钮样式 */
        .reset-button {
            position: absolute;
            bottom: 10px;
            left: 10px;
        }

        /* 已抽取的题目数样式 */
        .drawn-count {
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>信息工程学院发展对象培训班选拔随机抽题</h1>
    <button onclick="confirmGetQuestion()">开始抽取题目</button>
    <button onclick="confirmGetAnswer()">查看答案</button>
    <div class="reset-button">
        <button onclick="confirmReset()">重置</button>
    </div>
    <div class="question" id="question1"></div>
    <div class="question" id="question2"></div>
    <p class="answer" id="answer1"></p>
    <p class="answer" id="answer2"></p>
    <p class="drawn-numbers">已抽取的题库1序号: <span id="drawnNumbers1"></span></p>
    <p class="drawn-numbers">已抽取的题库2序号: <span id="drawnNumbers2"></span></p>
    <p class="drawn-count">已抽取的题目数: <span id="drawnCount">0</span></p>

    <script>
        let drawnNumbers1 = [];
        let drawnNumbers2 = [];
        let drawnCount = 0;
    
        // 恢复状态
        const storedDrawnNumbers1 = JSON.parse(localStorage.getItem('drawnNumbers1'));
        const storedDrawnNumbers2 = JSON.parse(localStorage.getItem('drawnNumbers2'));
        const storedDrawnCount = parseInt(localStorage.getItem('drawnCount'));
    
        if (storedDrawnNumbers1) {
            drawnNumbers1 = storedDrawnNumbers1;
        }
    
        if (storedDrawnNumbers2) {
            drawnNumbers2 = storedDrawnNumbers2;
        }
    
        if (!isNaN(storedDrawnCount)) {
            drawnCount = storedDrawnCount;
        }
    
        function updateUI() {
            document.getElementById('drawnNumbers1').textContent = drawnNumbers1.join(', ');
            document.getElementById('drawnNumbers2').textContent = drawnNumbers2.join(', ');
            document.getElementById('drawnCount').textContent = drawnCount;
        }
    
        function confirmGetQuestion() {
            if (confirm("确认开始抽取题目吗？")) {
                getQuestion();
            }
        }
    
        function confirmGetAnswer() {
            if (confirm("确认查看答案吗？")) {
                getAnswer();
            }
        }
    
        function confirmReset() {
            if (confirm("确认重置吗？")) {
                reset();
            }
        }
    
        function getQuestion() {
            // 清除答案显示
            document.getElementById('answer1').textContent = "";
            document.getElementById('answer2').textContent = "";
    
            fetch('/get_question')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('question1').textContent = `题号：${data.number1}\n${data.question1}`;
                    document.getElementById('question2').textContent = `题号：${data.number2}\n${data.question2}`;
    
                    if (data.number1) {
                        drawnNumbers1.push(data.number1);
                    }
                    if (data.number2) {
                        drawnNumbers2.push(data.number2);
                    }
    
                    drawnCount++;
                    updateUI();
    
                    // 保存状态
                    localStorage.setItem('drawnNumbers1', JSON.stringify(drawnNumbers1));
                    localStorage.setItem('drawnNumbers2', JSON.stringify(drawnNumbers2));
                    localStorage.setItem('drawnCount', drawnCount);
                });
        }
    
        function getAnswer() {
            fetch('/get_answer')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('answer1').textContent = `答案：${data.answer1}`;
                    document.getElementById('answer2').textContent = `答案：${data.answer2}`;
                });
        }
    
        function reset() {
            fetch('/reset')
                .then(response => {
                    drawnNumbers1 = [];
                    drawnNumbers2 = [];
                    drawnCount = 0;
                    document.getElementById('question1').textContent = "";
                    document.getElementById('question2').textContent = "";
                    document.getElementById('answer1').textContent = "题库已重置";
                    document.getElementById('answer2').textContent = "题库已重置";
                    updateUI();
    
                    // 清除保存的状态
                    localStorage.removeItem('drawnNumbers1');
                    localStorage.removeItem('drawnNumbers2');
                    localStorage.removeItem('drawnCount');
                });
        }
    
        // 初始更新UI
        updateUI();
    </script>
    
</body>
</html>
